<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                        <el-form-item label="装备名称" prop="equipmentName">
                            <el-input
                                    v-model="queryParams.equipmentName"
                                    placeholder="请输入装备名称"
                                    clearable
                                    size="small"
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="规格型号" prop="equipmentModel">
                            <el-input
                                    v-model="queryParams.equipmentModel"
                                    placeholder="请输入规格型号"
                                    clearable
                                    size="small"
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="类型" prop="equipmentType">
                            <el-select v-model="queryParams.equipmentType" placeholder="请选择类型" clearable size="small">
                                <el-option
                                        v-for="dict in equipmentTypeOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="存放位置" prop="address">
                            <el-input
                                    v-model="queryParams.address"
                                    placeholder="请输入存放位置"
                                    clearable
                                    size="small"
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['emergency:sysEmergencyInfo:add']"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['emergency:sysEmergencyInfo:edit']"
                >修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['emergency:sysEmergencyInfo:remove']"
                >删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="sysEmergencyInfoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="80" align="center">
               <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
               </template>
            </el-table-column>
                    <!--<el-table-column label="技术装备主键" align="center" prop="id" />-->
                    <el-table-column label="装备名称" align="center" prop="equipmentName" />
                    <el-table-column label="规格型号" align="center" prop="equipmentModel" />
                    <el-table-column label="类型" align="center" prop="equipmentType" :formatter="equipmentTypeFormat" />
                    <el-table-column label="数量" align="center" prop="equipmentNum" />
                    <el-table-column label="单位" align="center" prop="equipmentUnit" />
                    <el-table-column label="使用情况" align="center" prop="equipmentUsage" />
                    <el-table-column label="主管单位" align="center" prop="competentDepartment" />
                    <el-table-column label="负责人" align="center" prop="leadingCadre" />
                    <el-table-column label="联系电话" align="center" prop="phone" />
                    <el-table-column label="入库日期" align="center" prop="warehousingDate" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.warehousingDate, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="下次保养日期" align="center" prop="nextMaintainDate" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.nextMaintainDate, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="装备状态" align="center" prop="equipmentState" :formatter="equipmentStateFormat" />
                    <!--<el-table-column label="单位" align="center" prop="department" />-->
                    <el-table-column label="存放位置" align="center" prop="address" />
                    <el-table-column label="保养周期" align="center" prop="cycle" />
                    <el-table-column label="供应商" align="center" prop="supplier" />
                    <el-table-column label="生产厂家" align="center" prop="manufacturer" />
                    <el-table-column label="主要技术参数" align="center" prop="mainParam" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['emergency:sysEmergencyInfo:edit']"
                    >修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['emergency:sysEmergencyInfo:remove']"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改应急物资对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                                <el-form-item label="装备名称" prop="equipmentName">
                                    <el-input v-model="form.equipmentName" placeholder="请输入装备名称" />
                                </el-form-item>
                                <el-form-item label="规格型号" prop="equipmentModel">
                                    <el-input v-model="form.equipmentModel" placeholder="请输入规格型号" />
                                </el-form-item>
                                <el-form-item label="类型" prop="equipmentType">
                                    <el-select v-model="form.equipmentType" placeholder="请选择类型">
                                        <el-option
                                                v-for="dict in equipmentTypeOptions"
                                                :key="dict.dictValue"
                                                :label="dict.dictLabel"
:value="dict.dictValue"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="数量" prop="equipmentNum">
                                    <el-input v-model="form.equipmentNum" placeholder="请输入数量" />
                                </el-form-item>
                                <el-form-item label="单位" prop="equipmentUnit">
                                    <el-input v-model="form.equipmentUnit" placeholder="请输入单位" />
                                </el-form-item>
                                <el-form-item label="使用情况" prop="equipmentUsage">
                                    <el-input v-model="form.equipmentUsage" placeholder="请输入使用情况" />
                                </el-form-item>
                                <el-form-item label="主管单位" prop="competentDepartment">
                                    <el-input v-model="form.competentDepartment" placeholder="请输入主管单位" />
                                </el-form-item>
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="form.phone" placeholder="请输入联系电话" />
                                </el-form-item>
                                <el-form-item label="入库日期" prop="warehousingDate">
                                    <el-date-picker clearable size="small"
                                                    v-model="form.warehousingDate"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="选择入库日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="下次保养日期" prop="nextMaintainDate">
                                    <el-date-picker clearable size="small"
                                                    v-model="form.nextMaintainDate"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="选择下次保养日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="装备状态" prop="equipmentState">
                                    <el-select v-model="form.equipmentState" placeholder="请选择装备状态">
                                        <el-option
                                                v-for="dict in equipmentStateOptions"
                                                :key="dict.dictValue"
                                                :label="dict.dictLabel"
                                                :value="dict.dictValue"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <!--<el-form-item label="单位" prop="department">-->
                                    <!--<el-input v-model="form.department" placeholder="请输入单位" />-->
                                <!--</el-form-item>-->
                                <el-form-item label="存放位置" prop="address">
                                    <el-input v-model="form.address" placeholder="请输入存放位置" />
                                </el-form-item>
                                <el-form-item label="保养周期" prop="cycle">
                                    <el-input v-model="form.cycle" placeholder="请输入保养周期" />
                                </el-form-item>
                                <el-form-item label="供应商" prop="supplier">
                                    <el-input v-model="form.supplier" placeholder="请输入供应商" />
                                </el-form-item>
                                <el-form-item label="生产厂家" prop="manufacturer">
                                    <el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />
                                </el-form-item>
                                <el-form-item label="主要技术参数" prop="mainParam">
                                    <el-input v-model="form.mainParam" placeholder="请输入主要技术参数" />
                                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { listSysEmergencyInfo, getSysEmergencyInfo, delSysEmergencyInfo, addSysEmergencyInfo, updateSysEmergencyInfo } from "@/api/emergency/sysEmergencyInfo";

    export default {
        name: "SysEmergencyInfo",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 应急物资表格数据
                sysEmergencyInfoList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                        // 类型字典
                            equipmentTypeOptions: [],
                        // 装备状态字典
                            equipmentStateOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    equipmentName: null,

                    equipmentModel: null,

                    equipmentType: null,

                    address: null,

        },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                        equipmentName: [
                        { required: true, message: "装备名称不能为空", trigger: "blur" }
                    ],

                        equipmentModel: [
                        { required: true, message: "规格型号不能为空", trigger: "blur" }
                    ],

            }
        };
        },
        created() {
            this.getList();
                    this.getDicts("material_type").then(response => {
                        this.equipmentTypeOptions = response.data;
                });
                    this.getDicts("material_state").then(response => {
                        this.equipmentStateOptions = response.data;
                });
        },
        methods: {
            /** 查询应急物资列表 */
            getList() {
                this.loading = true;
                listSysEmergencyInfo(this.queryParams).then(response => {
                    this.sysEmergencyInfoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
            },
                    // 类型字典翻译
                        equipmentTypeFormat(row, column) {
                        return this.selectDictLabel(this.equipmentTypeOptions, row.equipmentType);
                    },
                    // 装备状态字典翻译
                        equipmentStateFormat(row, column) {
                        return this.selectDictLabel(this.equipmentStateOptions, row.equipmentState);
                    },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                        id: null,

                        equipmentName: null,

                        equipmentModel: null,

                        equipmentType: null,

                        equipmentNum: null,

                        equipmentUnit: null,

                        equipmentUsage: null,

                        competentDepartment: null,

                        leadingCadre: null,

                        phone: null,

                        warehousingDate: null,

                        nextMaintainDate: null,

                        equipmentState: null,

                        createBy: null,

                        updateBy: null,

                        createTime: null,

                        updateTime: null,

                        department: null,

                        address: null,

                        cycle: null,

                        supplier: null,

                        manufacturer: null,

                        mainParam: null,

            };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加应急物资";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getSysEmergencyInfo(id).then(response => {
                    this.form = response.data;
                this.open = true;
                this.title = "修改应急物资";
            });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateSysEmergencyInfo(this.form).then(response => {
                                this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                        } else {
                            addSysEmergencyInfo(this.form).then(response => {
                                this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除当前选中数据？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return delSysEmergencyInfo(ids);
                }).then(() => {
                    this.getList();
                this.msgSuccess("删除成功");
            }).catch(() => {});
            },
        }
    };
</script>
